<template>
  <div>
    <div>
      <ele-page
        v-loading="loading"
        :formConfig="searchConfig"
        ref="eleTable"
        :operateList="operateList"
        @handleOperateEvent="handleOperateEvent"
        :column="column"
        :getList="getList"
        uniqueId="wmsOutTaskScanTable"
        :initForm="otherParams"
      >
      </ele-page>
    </div>
    <ele-form-drawer
      class="dialog-pack"
      :isLoading="isLoading"
      v-model="formDataDialog"
      v-bind="formDescDialog"
      :request-fn="handleSubmit"
      :visible.sync="visible"
      :title="title"
    >
    </ele-form-drawer>
      <!-- 导入弹框 -->
      <ele-form-drawer
              size="30%"
              :isLoading="isLoadingImport"
              v-model="importData"
              v-bind="importFormDescDialog"
              :request-fn="handleSubmitImport"
              :visible.sync="importVisible"
              :destroyOnClose="true"
              :title="$i18n.t('common.import')"
      >
          <template v-slot:file="{ desc, data, field, formData }">
              <!-- 插槽内容有el-form-item组件包裹 -->
              <uploadNoAuto @onchange="upLoadHandleChange" ref="uploadNoAuto"/>
          </template>
      </ele-form-drawer>
  </div>
</template>

<script>
import {
  operateList,
  searchConfig,
  importFormDescDialog,
  formDescDialog,
  rowConfig,
} from './config'
import {
  getList,
  rowCreate,
  rowUpdate,
  rowDel,
  rowDetail,
  importData,
} from '@/api/outbound/wmsOutTaskScan'
import {
  getSnControl,
  getPushStatus,
  getCurrentWarehouseCode,
  getAccountingFlag,
  getAreaCodeList
} from "@/api/inbound/wmsInTaskScan";
import uploadNoAuto from "@/components/upload-no-auto";
export default {
  name: "wmsOutTaskScan",
  components:{
    uploadNoAuto
  },
  data() {
    return {
      title: null,
      visible: false,
      isLoading: false,
      loading: false,
      formDataDialog: {},
      otherParams: this.$route.query,
      formDescDialog, //新增修改框
      searchConfig,
      operateList,
      getList,
      isLoadingImport: false,  // 导入数据loading
      importData: {},  //导入数据
      importVisible: false,
      importFormDescDialog,  // 导入字段配置
      // 列表页字段的绑定配置
      column: [
        {
          type: "selection",
        },

        {
          prop: "warehouseCode",
          columnKey: "warehouseName",
          label: $i18n.t("common.warehouseName"),
          showOverflowTooltip: true,
          width: 150,
          optionProp: {
            value: "modelingCode",
            label: "modelingName",
          },
          option: async (data) => {
            const list = await getCurrentWarehouseCode();
            return list.data.result;
          },
        },
        {
          prop: "areaCode",
          label: $i18n.t("common.area"),
          width: 150,
          optionProp: {
            value: "areaCode",
            label: "areaDesc",
          },
          option: async (data) => {
            const list = await getAreaCodeList();
            return list.data.result;
          },
          showOverflowTooltip: true,
        },
        {
          prop: "locationCode",
          label: $i18n.t('wmsOutTaskScan.locationCode'),  // 库位编码
        },
        {
          prop: "orderNo",
          label: $i18n.t('wmsOutTaskScan.orderNo'),  // 单据编号
          width: 160,
        },
        {
          prop: "orderLine",
          label: $i18n.t('wmsOutTaskScan.orderLine'),  // 单据编号
          width: 100
        },
        {
          prop: "goodsCode",
          label: $i18n.t('wmsOutTaskScan.goodsCode'),  // 商品编码
          width: 160,
        },
        {
          prop: "goodsName",
          label: $i18n.t('wmsOutTaskScan.goodsName'),  // 商品名称
          width: 160,
        },
        {
          prop: "amount",
          label: $i18n.t('wmsOutTaskScan.amount'),  // 数量
        },
        {
          prop: "unit",
          label: $i18n.t('wmsOutTaskScan.unit'),  // 单位
        },
        {
          prop: "unitCode",
          label: $i18n.t('wmsOutTaskScan.unitCode'),  // 计量单位编码
          width: 100
        },
        {
          prop: "barcode",
          label: $i18n.t('wmsOutTaskScan.barcode'),  // 条码
          width:500
        },
        {
          prop: "printCode",
          label: $i18n.t('wmsOutTaskScan.printCode'),  // 打印码
          width: 500
        },
        {
          prop: "snControl",
          label: $i18n.t("wmsOutTaskScan.snControl"),
          width: 100,
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getSnControl();
            return list.data.result;
          },
        },
        {
          prop: "erpStatus",
          label: $i18n.t('wmsOutTaskScan.erpStatus'),
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getPushStatus();
            return list.data.result;
          }, // ERP状态 00未推送 01进行中 02 正常 03异常
          width: 150
        },
        {
          prop: "erpTime",
          label: $i18n.t('wmsOutTaskScan.erpTime'),  // erp时间
          width: 155,
        },
        {
          prop: "erpPushCode",
          label: $i18n.t('wmsOutTaskScan.erpPushCode'),  // ERP推送校验码: 单号_行号_扫描表id_时间戳
          width:500
        },,
        {
          prop: "erpMessage",
          label: $i18n.t('wmsOutTaskScan.erpMessage'),  // erp返回信息
          width: 150
        },
        {
          prop: "accountingFlag",
          label: $i18n.t("wmsOutTaskScan.accountingFlag2"), // 过账标记
          width: 100,
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getAccountingFlag();
            return list.data.result;
          },
        },
        {
          prop: "specification",
          label: $i18n.t('wmsOutTaskScan.specification'),  // 规格
        },
        {
          prop: "batchNo",
          label: $i18n.t('wmsOutTaskScan.batchNo'),  // 批次号
          width: 120,
        },
        // {
        //   prop: "supplyCode",
        //   label: $i18n.t('wmsOutTaskScan.supplyCode'),  // 供应商编码
        //   width: 200
        // },
        // {
        //   prop: "supplyName",
        //   label: $i18n.t('wmsOutTaskScan.supplyName'),  // 供应商名称
        //   width: 200
        // },
        {
          prop: "owner",
          label: $i18n.t('wmsOutTaskScan.owner'),  // 货主
        },
        {
          prop: "validDate",
          label: $i18n.t('wmsOutTaskScan.validDate'),  // 有效期
          width: 155
        },
        // {
        //   prop: "factoryCode",
        //   label: $i18n.t('wmsOutTaskScan.factoryCode'),  // 工厂编码(租户编码)
        // },
        {
          prop: "remark",
          label: $i18n.t('wmsOutTaskScan.remark'),  // 备注
        },
        {
          prop: "createByName",
          label: $i18n.t('common.createByName'),  // 创建人名称
          width: 155,
        },
        {
          prop: "createTime",
          label: $i18n.t('common.createTime'),  // 创建时间
          width: 155,
        },
        {
          prop: "updateByName",
          label: $i18n.t('common.updateByName'),  // 更新人名称
          width: 155,
        },
        {
          prop: "updateTime",
          label: $i18n.t('common.updateTime'),  // 更新时间
          width: 155,
        },
        // {
        //   prop: "operate",
        //   label: $i18n.t("common.operation"), // 操作
        //   width: 160,
        //   fixed: "right",
        //   render: (h, scope) => {
        //     return (
        //       <ele-row-operation
        //         scope={scope}
        //         rowConfig={rowConfig}
        //         onRowOperate={this.rowOperate}
        //       />
        //     )
        //   },
        // },
      ],
    }
  },
  computed: {
  },
  methods: {
    //表格顶部按钮操作事件
    handleOperateEvent(data) {
      this.title = data.name
      const fnc = {
        add: () => {
          this.disableFields(false)
          this.formDataDialog = {}
          this.visible = true
        },
        deleteBatch: () => {
          this.$confirm($i18n.t("common.deleteConfirm"), $i18n.t("common.tip"), {
            confirmButtonText:  $i18n.t("common.submit"),
            cancelButtonText: $i18n.t("common.cancel"),
            type: "warning",
          }).then(() => {
            const ids = data.rows.map((val) => val.id).join(',');
            this.rowDel(ids);
          });
        },
        import: () => {
          this.importDialogData = {};
          this.importVisible = true;
        }
      }
      fnc[data.handleName]()
    },
    //表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name
      const fnc = {
        edit: () => {
          this.disableFields(false)
          this.rowDetail(row.id)
          this.visible = true
        },
        detail: () => {
          this.disableFields(true)
          this.rowDetail(row.id)
          this.visible = true
        },
        delete: () => {
          this.$confirm($i18n.t("common.deleteConfirm"), $i18n.t("common.tip"), {
            confirmButtonText: $i18n.t("common.ok"),
            cancelButtonText: $i18n.t("common.cancel"),
            type: "warning",
          }).then(() => {
            this.rowDel(row.id)
          })
        },
      }
      fnc[handleName]()
    },
    doSubmit({ title, api, data}) {
      this.isLoading = true
      api(data)
        .then((res) => {
          const message = res.data.message
          this.$message.success(message || title)
          this.visible = false
          this.refresh()
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    //弹框提交事件
    handleSubmit(data) {
      if (this.isLoading) return // 判断状态
    delete data.userDefined1 // 删除不需要修改的非主键字段
    delete data.userDefined2 // 删除不需要修改的非主键字段
    delete data.userDefined3 // 删除不需要修改的非主键字段
    delete data.userDefined4 // 删除不需要修改的非主键字段
    delete data.userDefined5 // 删除不需要修改的非主键字段
    delete data.createBy // 删除不需要修改的非主键字段
    delete data.createByName // 删除不需要修改的非主键字段
    delete data.createTime // 删除不需要修改的非主键字段
    delete data.updateBy // 删除不需要修改的非主键字段
    delete data.updateByName // 删除不需要修改的非主键字段
    delete data.updateTime // 删除不需要修改的非主键字段
    delete data.activeFlag // 删除不需要修改的非主键字段
      const params = this.formDataDialog.id
        ? { title: $i18n.t("common.deleteSuccess"), api: rowUpdate, data}
        : { title: $i18n.t("common.addSuccess"), api: rowCreate, data}
      this.doSubmit(params)
    },
    //删除
    rowDel(data) {
      this.loading = true
      rowDel(data)
        .then((res) => {
          const message = res.data.message
          this.$message.success(message || $i18n.t("common.deleteSuccess"))
          this.refresh()
        })
        .finally(() => {
          this.loading = false
        })
    },
    disableFields(flag) {
      this.formDescDialog.disabled = flag
      this.formDescDialog.isShowSubmitBtn = !flag
    },
    rowDetail(id) {
      rowDetail(id)
        .then((res) => {
          this.formDataDialog = res.data.result;
        })
    },
    //刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset)
    },
    //数据文件上传
    upLoadHandleChange(file){
      this.$set(this.importData,"file",file)
    },
      // 提交导入信息
    handleSubmitImport () {
      if(!this.importData.file){
          this.$message.error($i18n.t("common.uploadMsg"))
          return;
      }
      const formData = new FormData();
      formData.append('file', this.importData.file.get('file'));
      this.isLoadingImport = true;
      importData(formData).then((res) => {
          this.$message.success($i18n.t("common.importSuccess"));
          this.isLoadingImport = false;
          this.importVisible = false;
          this.refresh();
      }).catch((error) => {
          console.log("错误",error)
          this.$set(this.importData,"file",null)
      }).finally(() => {
          this.isLoadingImport = false;
          this.$refs.uploadNoAuto.clearFiles()
      })
    },
  },
}
</script>
